<template>
  <div class="common-count-wrapper">
    <div class="count-wrapper">
      {{ countString }}
    </div>
    <div class="count-desc-wrapper">
      <el-text truncated>
        {{ desc }}
      </el-text>
    </div>

  </div>
</template>
<script setup>
import {computed, defineOptions} from 'vue';

defineOptions({
  name: 'CommonCountComponent'
});

const props = defineProps({
  count: undefined,
  color: undefined,
  desc: undefined
});

const countString = computed(() => {
  if (props.count === undefined) {
    return '-'
  }
  return props.count + '';
});

</script>
<script>
export default {
  name: 'CommonCountComponent'
};
</script>
<style>
.common-count-wrapper {
  padding: 10px;
  flex: 1;
  border: 2px solid #f0f2f5;
  background: white;
  cursor: pointer;
}

.common-count-wrapper:hover {
  background: #2592df;
  color: white;
}

.count-wrapper {
  text-align: center;
  font-size: 25px;
  user-select: none;
  color: v-bind(color);
  height: 33px;
}

.common-count-wrapper:hover .count-desc-wrapper,
.common-count-wrapper:hover .count-desc-wrapper .el-text,
.common-count-wrapper:hover .count-wrapper {
  color: white !important;
}

.count-desc-wrapper {
  text-align: center;
  user-select: none;
}
</style>
